/*
 * @Title: 页面头部
 * @Created by: ycq 
 */
<template>
	<view class="index-header" :style="{'height': (config.common.headHeight!=0 ? 'calc('+statusBarHeight+' + '+config.common.headHeight+'upx)':'')}"  :class="[!config.common.hasMenu ? 'no-menu':'',config.common.minHead?'index-header-min':'',config.common.maxHead?'index-header-max':'' ]">
		<!-- <image class="bg-img" v-if="bgImg!=''" :src="bgImg" mode=""></image> -->
		<view v-if="bgImg!=null" class="bg-img">
			<view class="dot-main" style="bottom: 20upx;">
				<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
				<view :class="['dot-item2',currentB==index?'active2':'']" v-if='bgImg.length > 1' v-for="(item,index) in bgImg" :key="index"></view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
				<view :class="['dot-item2',currentB==index?'active2':'']" v-if='bgImg.length > 1' v-for="(item,index) in bgImg" :key="index"></view>
				<!-- #endif -->
			</view>
			<swiper  class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular='true'   @change="menuChangeB">
				<swiper-item v-for="(item,index) in bgImg" :key='index'>
					<image class="bg-img"  :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="header-bg" v-if="showHeaderBg" :style="{'top': (config.common.headHeight!=0 ?'calc('+statusBarHeight+' + '+(config.common.headHeight-70)+'upx)':'')}" :class="[config.common.minHead?'header-bg-min':'',config.common.maxHead?'header-bg-max':'' ]">
			
		</view>
		<view class="title showTop" :style="{'background':(!showFixBg?'none':'')}" >
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back" v-if="showBackBtn" @click="back">
				<image  src="/static/fanhui.png"  ></image>
			</view>
			<view v-if='showPos' class="home-search-pos" >
				<image :src="config.left.img"  mode=""></image>
				<text>{{config.left.text}}</text>
			</view>
			<text v-if="config.left.leftTitle!=null||config.left.leftTitle!=''" class="left-title">{{config.left.leftTitle}}</text>
			<text  @tap="rightTapHandle1" v-if="config.mid.rtext!=null||config.mid.rtext!=''" class="title-right">{{config.mid.rtext}}</text>
			<text class='page-title' v-if='config.common.hasTitle'>{{config.mid.title}}</text>
			<view class="search-bar-mid" v-if="config.common.hasSearchMid">
				<input type="text" placeholder="请输入搜索内容" placeholder-style="color:white" class="search">
			</view>
			<view class="search-bar-mid-index"  v-if="config.common.hasSearchIndex">
				<input type="text" placeholder="请输入搜索内容" placeholder-style="color:white" class="search">
			</view>
			<view class="search-bar-mid2" v-if="config.common.hasSearchMid2">
				<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
				<uni-icon type="search" style='margin-left: 30upx;position: absolute;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
				<uni-icon type="search" style='margin-left: 130upx;position: absolute;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
				<!-- #endif -->
				<input type="text" placeholder="请输入搜索内容" placeholder-style="color:#999999" class="search">
			</view>
			<view v-if='config.mid.showMsg' class="head-right-icon">
				<image class="msg-icon" src="/static/map/msg.png" mode="aspectFit"></image>
			</view>
			<view v-if='config.mid.showDownload' style="right: 80upx;"  class="head-right-icon">
				<image class="download-icon" src="/static/map/download.png" mode="aspectFit"></image>
			</view>
			<view v-if='config.mid.showAddIcon'  class="head-right-icon" @tap="rightIcoHandle">
				<image class="addfriend-icon" :src="config.mid.rightIco"></image>
			</view>
		</view>
		<view class="search-bar" v-if="config.common.hasSearch">
			<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
			<uni-icon type="search" style='margin-left: 60upx;position: absolute;margin-top: 30upx;' size="20" color="#999999"></uni-icon>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
			<uni-icon type="search" style='margin-left: 60upx;position: absolute;margin-top: 30upx;' size="20" color="#999999"></uni-icon>
			<!-- #endif -->
			<input type="text"  @click="searchClick()" placeholder="请输入搜索内容" placeholder-style="color:rgba(51,51,51,1.00)" class="search">
		</view>
		<view 
			:class="config.common.pageId=='tuanyou'?'index-menu-crew':'index-menu'"
			v-if="config.common.hasMenu" 
			:style="{'top': (config.common.headHeight!=0 ? (config.common.headHeight-50)+'upx':'')}">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<ShouyeOrder :pageType='4' style='border-top: none;margin-top: -30upx;margin-bottom: 20upx;'  v-if='config.common.pageId=="tuanyou"' />
			<view class="swiper" v-if="navData.length<2">
				<view class="swiper-item" >
					<view class="head-menu-area">
						<view class="head-menu-item" v-for="nav in navData[0].data" :key='nav.name' @click="navClick(nav.url)">
							<view class="head-menu-img">
								<image :src='nav.img' mode="aspectFit"></image>
							</view>
							<text>{{nav.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<swiper  v-if="navData.length>1" class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"   @change="menuChange">
				<swiper-item v-for="(pageItem,index) in navData" :key='index'>
					<view class="swiper-item" >
						<view class="head-menu-area">
							<view class="head-menu-item" v-for="nav in pageItem.data" :key='nav.name' @click="navClick(nav.url)">
								<view class="head-menu-img">
									<image :src='nav.img' mode="aspectFit"></image>
								</view>
								<text>{{nav.name}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dot-main">
				<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
				<view :class="['dot-item',current==index?'active':'']" v-if='navData.length > 1' v-for="(item,index) in navData" :key="index"></view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
				<view :class="['dot-item',current==index?'active':'']" v-if='navData.length > 1' v-for="(item,index) in navData" :key="index"></view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import banner from '@/components/banner.vue'
	export default{
		props:{
			// 右侧按钮点击事件
			rightIcoHandle:{
				type:Function,
				default:function(){
					return function(){
						console.log('rightIcoHandle');
					}
				}
			},
			// 右侧第一个按钮事件
			rightTapHandle1:{
				type:Function,
				default:function(){
					return function(){
						console.log('rightTapHandle1 click');
					}
				}
			},
			bgImg:{
				type:Array,
				default:null
			},
			config: {
				type: Object,
				default: function() {
					return {
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							showHeadBg:true,
							headHeight:0,
							showHeaderBg:true,
							hasMenu:false,
							hasTitle:false,
							hasSearchIndex:false,
							hasSearchMid:false,
							hasSearchMid2:false,
							minHead:false,
							maxHead:false,
							pageId:1,
							fixBg:true
						},
						left: {
							showHeadBg:true,
							showBack:true,
							otherUrl:false,
							showPos:true,
							leftTitle:'',
							backToUrl:'',
							img:'/static/pos-home.png',
							text:'沈阳',
						},
						mid:{
							title:'宾馆',
							hasSearchMid:false,
							hasSearchMid2:false,
							rtext:'确认新增',
							showMsg:false,
							showDownload:false,
							showAddIcon:false, //是否显示右侧icon
							rightIco:'/static/msg.png'//右侧图标地址
						},
						righter:{
							
						}
					}	
				}
			},
			
		},
		data(){
			return{
				current: 0,
				currentB:0,
				pageIndex:4,
				statusBarHeight:global.statusBarHeight + 'px',
				headHeight:0,
				showHeaderBg:true,
				showBackBtn:true,
				showPos:true,
				showFixBg:false,
				navData:[],
				hotelData:[  // 首页-宾馆
					{data:[{name:'钟点房',img:'/static/zdf.png',url:''},
							{name:'特价酒店',img:'/static/tjjd.png',url:''},
							{name:'民宿',img:'/static/ms.png',url:''},
							{name:'民宿短租',img:'/static/msdz.png',url:''},
							{name:'复式',img:'/static/fs.png',url:''}]}
				],
				scenicData:[  // 首页-景区
					{data:[{name:'名胜古迹',img:'/static/spot/msgj.png',url:''},
							{name:'自然景区',img:'/static/spot/zrfj.png',url:''},
							{name:'宗教寺庙',img:'/static/spot/zj.png',url:''},
							{name:'主题乐园',img:'/static/spot/ztly.png',url:''},
							{name:'体育旅游',img:'/static/spot/ty.png',url:''}]},
					{data:[
							{name:'工业旅游',img:'/static/spot/gyly.png',url:''},
							{name:'校园旅游',img:'/static/spot/xyly.png',url:''}]}
				],
				foodData:[  // 首页-美食
					{data:[
						{name:'排队取号',img:'/static/xckc.png',url:''},
						{name:'预订座位',img:'/static/xckc.png',url:''},
						{name:'晚餐',img:'/static/xckc.png',url:''},
						{name:'火锅',img:'/static/xckc.png',url:''},
						{name:'小吃快餐',img:'/static/xckc.png',url:''},
						{name:'小吃快餐',img:'/static/xckc.png',url:''},
						{name:'烧烤烤肉',img:'/static/skkr.png',url:''}]},
						{name:'晚餐',img:'/static/wc.png',url:''},
						{name:'火锅',img:'/static/hg.png',url:''},
						{name:'蛋糕奶茶',img:'/static/ncdg.png',url:''},
				],
				crewData:[  // 首页-团游
					{data:[{name:'名胜古迹',img:'/static/msgj-t.png',url:''},
							{name:'自然景区',img:'/static/zrfj-t.png',url:''},
							{name:'宗教寺庙',img:'/static/zjsm-t.png',url:''},
							{name:'主题乐园',img:'/static/ztly-t.png',url:''},
							{name:'体育旅游',img:'/static/tyly-t.png',url:''}]}
				],
				recreData:[  // 首页-娱乐
					{data:[{name:'密室',img:'/static/mishi.png',url:''},
							{name:'电玩游戏厅',img:'/static/dwyxt.png',url:''},
							{name:'轰趴管',img:'/static/hpg.png',url:''},
							{name:'手工坊',img:'/static/sgf.png',url:''},
							{name:'游泳',img:'/static/yy.png',url:''}]}
				],
			}
		},
		methods: {
			menuChange(e) {
				this.current = e.detail.current;
			},
			menuChangeB(e) {
				this.currentB = e.detail.current;
			},
			back(){
				// if(this.config.left.otherUrl){
				if(this.config.left.backToUrl!=null&&this.config.left.backToUrl!=''){
					uni.switchTab({
						url:this.config.left.backToUrl
					})
				}else{
					uni.navigateBack({delta: 1})
				}
			},
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			},
			navClick(path){
				uni.navigateTo({
					url:path
				})
			},
			searchClick(){
				
			}
		},
		created() {
			const that = this;
			//获取所有页面
			let curPages = getCurrentPages();
			let pageLen = curPages.length;
			// #ifndef H5
			//监听页面滚动，页面向下滚动时候导航逐渐变白
			curPages[pageLen - 1].onPageScroll = function(e){
				that.$emit('scroll',e);
				if(e.scrollTop > 0){
					that.showFixBg = true
				}else{
					that.showFixBg = false
				}
				if(e.scrollTop > 800){
					that.$store.commit('showToTopUpdate',true)
				}else{
					that.$store.commit('showToTopUpdate',false)
				}
			}
			// #endif
			
			// #ifdef H5
			window.onscroll = function(e){
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				that.$emit('scroll',{scrollTop:scrollTop});
				if(scrollTop > 0){
					that.showFixBg = true
				}else{
					that.showFixBg = false
				}
				if(scrollTop > 800){
					that.$store.commit('showToTopUpdate',true)
				}else{
					that.$store.commit('showToTopUpdate',false)
				}
			}
			// #endif
			
			
			if(this.config.common.fixBg != null){
				this.showFixBg = this.config.common.fixBg
			}
			if(this.config.common.showHeadBg != null){
				this.showHeaderBg = this.config.common.showHeadBg
			}
			// if(this.config.left.showHeadBg != null){
			// 	this.showHeaderBg = this.config.common.showHeadBg
			// }
			this.pageIndex = this.config.common.pageId
			if(this.config.left.showBack != null){
				this.showBackBtn = this.config.left.showBack
			}
			if(this.config.left.showPos != null){
				this.showPos = this.config.left.showPos
			}
			switch(this.pageIndex){
				case 'binguan': //首页-宾馆
					this.navData = this.hotelData;
					break;
				case 'jingqu': //首页-景区
					this.navData = this.scenicData;
					break;
				case 'meishi': //首页-美食
					this.navData = this.foodData;
					break;
				case 'tuanyou': //首页-团游
					this.navData = this.crewData;
					break;
				case 'yule': //首页-娱乐
					this.navData = this.recreData;
					break;	
				default:
					this.navData = [];
					break;
			}
			
			
		},
		mounted() {
			
			if(this.config.common.showHeadBg != null){
				this.showHeaderBg = this.config.common.showHeadBg
			}
			this.getStatusTop();
		},
		onReady: function () {
			let info = uni.createSelectorQuery().select(".index-header");
			　　info.boundingClientRect(function(data) { //data - 各种参数
				
			}).exec()
		},
		components: {
			ShouyeOrder,
			uniIcon,
			banner
		},
		
		
		
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.index-header{
		width: 100%;
		height: 280upx;
		margin-bottom: 20vw;
		position: relative;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
	}
	.index-header-min{
		height: 180upx;
	}
	.index-header-max{
		height: 360upx;
	}
	.no-menu{
		margin-bottom: 20upx;
	}
	.bg-img{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.header-bg{
		width: 100%;
		height: 75upx;
		bottom: 0upx;
		position: absolute;
		background: -webkit-linear-gradient(top,rgba(255,255,255,0) ,#ffffff);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom,rgba(255,255,255,0) ,#ffffff);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom, rgba(255,255,255,0) ,#ffffff) ;
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, rgba(255,255,255,0) ,#ffffff) ;
		/* 标准的语法 */
	}
	.head-right-icon{
		width: 50upx;
		height: 50upx;
		float: right;
		right: 20upx;
		margin-left: 10upx;
		position: absolute;
		z-index: 2;
	}
	
	/* #ifdef MP-WEIXIN */
	.head-right-icon{
		margin-top:70upx;
	}
	/* #endif */
	.msg-icon{
		width: 42upx;
		top: 4upx;
		height: 36upx;
	}
	.download-icon{
		width: 38upx;
		top: -4upx;
		height: 33upx;
	}
	.addfriend-icon{
		width: 40upx;
		top: 0upx;
		height: 40upx;
	}
	.header-bg-min{
		height: 90upx;
		bottom: 0upx;
	}
	.header-bg-max{
		height: 270upx;
		bottom: 0upx;
	}
	.back{
		float: left;
		width: 80upx;
		height: 80upx;
		margin-left: 20upx;
		position: absolute;
		z-index: 2;
		margin-top: 2upx;
		text-align: left;
	}
	.back image{
		width: 38upx;
		height: 36upx;
		z-index: 2;
	}
	.home-search-pos{
		height: 50upx;
		line-height: 50upx;
		width: auto;
		float: left;
		margin-left: 70upx;
		margin-top: 2upx;
	}
	.home-search-pos image{
		width: 26upx;
		height: 30upx;
		float: left;
		margin-top: 10upx ;
	}
	.home-search-pos text{
		white-space: nowrap;  /*强制text不换行*/
		display: inline-block;  /*将text当做块级元素对待*/
		height: 30upx;
		float: left;
		padding-left: 10upx;
		color: #FFFFFF;
		line-height: 30upx;
		margin-right: 0 ;
		font-size: 28upx ;
		margin-top: 11upx ;
	}
	.left-title {
		white-space: nowrap;  /*强制text不换行*/
		display: inline-block;  /*将text当做块级元素对待*/
		height: 19upx;
		float: left;
		padding-left: 10upx;
		line-height: 19upx;
		margin-right: 0 ;
		font-size:30upx ;
		color: #FFFFFF;
		margin-top: 11upx ;
	}
	.title{
		width: 100%;
		/* height: 60upx; */
		height: auto;
		padding-top: 20upx;
		padding-bottom: 10upx;
	}
	.showTop{
		position: fixed;
		z-index: 30;
		top: 0;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
	}
	.title text{
		color: white;
	}
	.title-right{
		white-space: nowrap;  /*强制text不换行*/
		display: inline-block;  /*将text当做块级元素对待*/
		height: 19upx;
		/* float: right; */
		/* padding-right: 26upx; */
		line-height: 19upx;
		/* margin-right: 0 ; */
		right: 26upx;
		z-index: 2;
		position: absolute;
		font-size:30upx ;
		color: #FFFFFF;
		margin-top: 11upx ;
	}
	.page-title{
		display: block;
		width: 100%;
		position: absolute;
		z-index: 1;
		font-size: 4.5vw;
		text-align: center;
		padding-top: -5upx;
	}
	.search-bar{
		width: 100%;
		height: 80upx;
		margin-top: 80upx;
		position: absolute;
		
	}
	.search-bar .search{
		width: 600upx;
		overflow: inherit !important;
		margin-top: 20upx;
	}
	.search-bar-mid .search{
		width: 500upx;
		margin-top: -10upx;
		overflow: inherit !important;
	}
	.search-bar-mid2 .search{
		width: 450upx;
		margin-top: -10upx;
		overflow: inherit !important;
	}
	.search-bar-mid2 uni-icon{
		left:100upx;
		position:absolute
	}
	
	.search-bar-mid-index .search{
		width: 400upx;
		margin-top: -5upx;
		overflow: inherit !important;
	}
	.search-bar-mid-index input{
		width: 360upx;
		margin:0upx 0 0 200upx;
		height: 60upx;
		background: url(/static/fdj-head.png) no-repeat center rgba(255,255,255,0.4) ;
		background-position: 25upx;
		background-size: 28upx 28upx;
		padding-left: 73upx;
		padding-right: 30upx;
		color: #FFFFFF;
		font-size: 26upx;
		border-radius: 30px;
	}
	.search-bar input{
		width: 628upx;
		margin:0upx auto 0 auto;
		height: 60upx;
		/* background: url(/static/fdj-head.png) no-repeat center rgba(255,255,255,0.4) ; */
		background: #FFFFFF;
		background-position: 25upx;
		background-size: 28upx 28upx;
		padding-left: 73upx;
		font-size: 26upx;
		border-radius: 30px;
	}
	.search-bar-mid input{
		width: 500upx;
		margin:0upx auto 0 auto;
		height: 60upx;
		background: url(/static/fdj-head.png) no-repeat center rgba(255,255,255,0.4) ;
		background-position: 25upx;
		background-size: 28upx 28upx;
		padding-left: 73upx;
		color: #FFFFFF;
		font-size: 26upx;
		border-radius: 30px;
	}
	.search-bar-mid2 input{
		width: 450upx;
		margin:0upx auto 0 auto;
		height: 60upx;
		background: url(/static/fdj-head.png) no-repeat center rgba(255,255,255,1) ;
		background-position: 25upx;
		background-size: 28upx 28upx;
		padding-left: 73upx;
		color: #FFFFFF;
		font-size: 26upx;
		border-radius: 30px;
	}
	.index-menu{
		width: 700upx;
		margin-left: 25upx;
		height: 110upx;
		top: 225upx;
		position: absolute;
	}
	.index-menu-crew{
		width: 700upx;
		margin-left: 25upx;
		height: 110upx;
		top: 205upx;
		position: absolute;
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.head-menu-area{
		width: 700upx;
		height: 98upx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
	}
	.head-menu-item{
		width: 140upx;
		height: 100%;
		padding: 15upx 0;
		text-align: center;
	}
	.head-menu-img{
		width: 100%;
		height: 60upx;
	}
	.head-menu-item image{
		width: 100%;
		height: 42upx;
	}
	.head-menu-item text{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 28upx;
	}
	.dot-main {
		width: 100%;
		height: 38upx;
		display: flex;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 30upx;
		height: 8upx;
		border-radius: 30upx;
		background: rgba(0,0,0,0.2);
		margin: 0 0upx;
		box-sizing: border-box;
	}
	.dot-item2 {
		width: 10upx;
		height: 10upx;
		border-radius: 30upx;
		margin: 0 6upx;
		background: rgba(0,0,0,0.2);
		box-sizing: border-box;
	}
	.active {
		background: #55A0FF;
	}
	.active2 {
		background: #FFFFFF;
	}
</style>